﻿
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    <link href="~/css/shop.css" type="text/css" rel="stylesheet" />
    <link href="~/css/Sellerber.css" type="text/css" rel="stylesheet" />
    <link href="~/css/bkg_ui.css" type="text/css" rel="stylesheet" />
    <link href="~/font/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <script src="~/layui/layui.js"></script>
    <script src="~/js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="~/js/jquery.cookie.js"></script>
    <script src="~/js/shopFrame.js" type="text/javascript"></script>
    <script src="~/js/Sellerber.js" type="text/javascript"></script>
    <script src="~/js/layer/layer.js" type="text/javascript"></script>
    <script src="~/js/laydate/laydate.js" type="text/javascript"></script>
    <script type="text/javascript" src="~/js/proTree.js"></script>
    <script src="~/js/dist/echarts.js" type="text/javascript"></script>
    <script src="~/js/Maximum/Maximum.js"></script>
    <script src="~/js/jquery.dataTables.min.js"></script>
    <script src="~/js/jquery.dataTables.bootstrap.js"></script>
    <script src="~/js/TimeFormat.js"></script>
    <script src="~/js/hsCheckData.js" type="text/javascript"></script>
    <title>产品列表</title>
</head>
<body>
    <div class="margin" id="page_style">
        <div class="operation clearfix mb15 same_module">
            <ul class="choice_search">
                <li class="clearfix col-xs-3 col-lg-3 col-ms-3 "><label class="label_name ">产品名称：</label><input name="" type="text" class="form-control col-xs-8 col-lg-8 col-ms-8" /></li>
                <li class="clearfix col-xs-5 col-lg-5 col-ms-5 ">
                    <label class="label_name ">添加时间：</label>
                    <input class="laydate-icon col-xs-4 col-lg-3 form-control Select_Date" id="start" />
                    <span style=" float:left; padding:0px 10px; line-height:32px;">至</span>
                    <input class="laydate-icon col-xs-4 col-lg-3 form-control Select_Date" id="end" />
                    <button class="btn button_btn bg-deep-blue " onclick="" type="button"><i class="fa  fa-search"></i>&nbsp;搜索</button>
                </li>
            </ul>
        </div>
        <!--列表展示-->
        <div class="h_products_list clearfix" id="Sellerber">
            <div class="Sellerber_left menu" id="menuBar">
                <div class="show_btn" id="rightArrow"><span></span></div>
                <div class="side_title"><a title="隐藏" class="close_btn"><span></span></a></div>
                <div class="menu_style" id="menu_style">
                    <div class="list_content">
                        <div class="side_list">
                            <div class="column_title"><h4 class="lighter smaller">产品类型列表</h4></div>
                            <div class="st_tree_style tree">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="list_Exhibition list_show padding15">
                <div class="operation clearfix mb15 searchs_style">
                    <button class="btn button_btn btn-danger" type="button" onclick="">
                        <i class="fa fa-trash-o"></i>&nbsp;批量删除
                    </button>
                    <span class="submenu">
                        <a href="/Commodity/add_product" name="" class="btn button_btn bg-deep-blue" title="添加产品">
                             <i class="fa  fa-edit"></i>&nbsp;添加产品
                        </a>
                    </span>
                    <div class="search  clearfix">
                        <label class="label_name">商品搜索：</label>
                        <input name="" type="text" class="form-control col-xs-5" />
                        <button class="btn button_btn bg-deep-blue " onclick="" type="button">
                            <i class="fa  fa-search"></i>&nbsp;搜索
                        </button>
                       @* <span>数量：3433件</span>*@
                    </div>
                </div>
                <div class="datalist_show">
                    <table id="CommodityTable" class="layui-hide" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script type="text/html" id="display">
    <input type="checkbox" name="switch" value="{{d.Id}}" lay-skin="switch" lay-text="上架|下架" lay-filter="Status" {{ d.Publish_Status == 1 ? 'checked' : '' }}/>
</script>
<script type="text/html" id="barDemo">
    <a title="编辑" href="javascript:;" lay-event="edit" class="btn btn-xs btn-info">编辑</a>
    <a title="删除" href="javascript:;" lay-event="del" class="btn btn-xs btn-delete">删除</a>
</script>

<script>
layui.use('table', function () {
        var table = layui.table,
            form = layui.form;
        //第一个实例
        table.render({
            elem: "#CommodityTable",
            height: 400,
            url: '/Commodity/GetProducts',
            page: true,
            cols: [[ //表头
              { type: 'checkbox', fixed: 'left', align: 'center' }
            , { field: 'Code', align: 'center', title: '商品编号', sort: true }
            , { field: 'Name', align: 'center', title: '商品名称', sort: true }
            , { field: 'categoryName', align: 'center', title: '分类名称', sort: true }
            , { field: 'Price', align: 'center', title: '商品售价', sort: true }
            , { field: 'InDate', align: 'center', title: '加入时间', sort: true, templet: "<div>{{Format(d.InDate,'yyyy-MM-dd hh:mm:ss')}}</div>" }
            , { field: 'Audit_Status', align: 'center', title: '审核状态', sort: true ,templet: function (d) { if (d.Audit_Status == 0) { return '未审核' } else { return '已审核' } }}
            , { field: 'Status', align: 'center', title: '状态', sort: true ,toolbar:"#display" }
            , { field: 'cz',fixed: 'right' ,title: '操作', align: 'center', toolbar: '#barDemo', width: 150, sort: true }
             ]]
        })

         //监听工具条
    table.on('tool(test)', function (obj) {
        var data = obj.data;
        if (obj.event === 'del') {//删除
            layer.confirm('真的删除行么', function (index) {
                $.ajax({
                    type: "post",
                    url: "/Commodity/BrandDeleteId?id=" + data.Id,
                    async: false,
                    success: function (data) {
                        if (data.Success) {
                            layer.msg("删除成功", { time: 2000 }, function () {
                                obj.del();
                               layer.close(index);
                            })
                        }
                    }
                })
            });
        } else if (obj.event === 'edit') {//修改
            location.href = "/Commodity/Add_Product?id=" + data.Id;
        }
    });

     //是否启用switch(Status)对应lay-filter="Status"
    form.on('switch(Status)', function (obj) {
        var data = {};
        data.Id = this.value;
        data.Status = 0;
        if (obj.elem.checked) {
            data.Status=1
        }
        $.ajax({
            type: "post",
            url: "/Commodity/UpdatePicductStatus",
            data: data,
            success: function (data) {
                if (data.Success) {
                    //  location.reload();
                    layer.msg("修改成功!!", {
                        time: 2000 //1秒关闭（如果不配置，默认是3秒）
                    });
                    layui.table.reload('CommodityTable');
                } else {
                    layer.msg("修改失败", { icon: 5, time: 200 });
                }
            }
        })
    });

});

    //批量删除
    function Deletes() {
        var table = layui.table;
        //获取选中数据
        var checkStatus = table.checkStatus('CommodityTable')
            , data = checkStatus.data;
        //获取拼接的id
        var id = BatchDelete(data);
        //删除数据
        layer.confirm('真的要删除吗', function (index) {
            $.ajax({
                url: "/Commodity/DeleteBrand?brand=" + data,
                type: "Post",
                success: function (data) {
                    if (data.Success) {
                        layer.msg('删除成功！', {
                            title: '提示框',
                            icon: 1,
                            time: 2000
                        }, function () {
                            TableReload();
                            layer.close(index);
                        });
                    }
                    else {
                        layer.msg('删除失败！', {
                            title: '提示框',
                            icon: 1,
                            time: 2000
                        });
                    }
                }
            });
        })
    }

    //拼接id
    function BatchDelete(data) {
        var id = "";
        for (var i = 0; i < data.length; i++) {
            if (i != data.length - 1) {
                id += data[i].Id + ',';
            }
            else {
                id += data[i].Id;
            }
        }
        return id;
    }


   //列表刷新
    function TableReload() {
        var table = layui.table;
        var name = $('#brandname').val();
        var addTime = $('#start').val();
        table.reload('CommodityTable', {
            where: {
                'name': name,
                'datetime': addTime
            }
        });
    }

</script>
<script type="text/javascript">
    //设置内页框架布局
    $(function () {
        $("#Sellerber").frame({
            float: 'left',
            color_btn: '.skin_select',
            Sellerber_menu: '.list_content',
            page_content: '.list_show',//内容
            datalist: ".datatable_height",//数据列表高度取值
            header: 65,//顶部高度
            mwidth: 200,//菜单栏宽度

        });
    });
    //后台传入的 标题列表
    var arr = [{
        id: 1,
        name: "食品/酒类/特产",
        amount: 234,
        pid: 0,

    }, {
        id: 2,
        name: "数码家电",
        amount: 64,
        pid: 0,

    }, {
        id: 3,
        name: "家具/家居",
        amount: 64,
        pid: 0,

    }, {
        id: 4,
        name: "电脑办公",
        amount: 64,
        pid: 0,

    }, {
        id: 5,
        name: "图书影响",
        amount: 64,
        pid: 0,

    }, {
        id: 6,
        name: "母婴用品",
        amount: 64,
        pid: 0,

    }, {
        id: 13,
        name: "牛奶",
        amount: 64,
        pid: 1
    }, {
        id: 14,
        name: "面包",
        amount: 64,
        pid: 1
    }, {
        id: 15,
        name: "饼干",
        amount: 64,
        pid: 1
    }, {
        id: 16,
        name: "白酒",
        amount: 64,
        pid: 1
    }, {
        id: 17,
        name: "啤酒",
        amount: 64,
        pid: 1
    }, {
        id: 18,
        name: "红酒",
        amount: 64,
        pid: 1
    }, {
        id: 19,
        name: "音响",
        amount: 64,
        pid: 2
    }, {
        id: 20,
        name: "冰箱",
        amount: 64,
        pid: 2
    }, {
        id: 21,
        name: "洗衣机",
        amount: 64,
        pid: 2
    }, {
        id: 21,
        name: "洗衣机",
        amount: 64,
        pid: 3
    }, {
        id: 21,
        name: "洗衣机",
        amount: 64,
        pid: 4
    }, {
        id: 21,
        name: "洗衣机",
        amount: 64,
        pid: 5
    }

    ];
    //树状图插件
    $(".tree").ProTree({
        arr: arr,//数据
        simIcon: "fa fa-file-text-o",//单个标题字体图标 不传默认glyphicon-file
        mouIconOpen: "fa fa-folder-open",//含多个标题的打开字体图标  不传默认glyphicon-folder-open
        mouIconClose: "fa fa-folder",//含多个标题的关闭的字体图标  不传默认glyphicon-folder-close

    })
    /******时间设置*******/
    var start = {
        elem: '#start',
        format: 'YYYY-MM-DD',
        // min: laydate.now(), //设定最小日期为当前日期
        max: '2099-06-16', //最大日期
        istime: true,
        istoday: false,
        choose: function (datas) {
            end.min = datas; //开始日选好后，重置结束日的最小日期
            end.start = datas //将结束日的初始值设定为开始日
        }
    };
    var end = {
        elem: '#end',
        format: 'YYYY-MM-DD',
        //min: laydate.now(),
        max: '2099-06-16',
        istime: true,
        istoday: false,
        choose: function (datas) {
            start.max = datas; //结束日选好后，重置开始日的最大日期
        }
    };
    laydate(start);
    laydate(end);



</script>
